<template>
    <div>
        <h2>Home组件内容</h2>
        <ul class="Nav">
            <li>
                <router-link replace active-class="active" to="/Home/News">News</router-link>
            </li>
            <li>
                <router-link active-class="active" to="/Home/Message">Message</router-link>
            </li>
        </ul>
        <hr>
        <keep-alive>
            <router-view></router-view>
        </keep-alive>
        
    </div>
</template>
<script>

export default {
    name:'Home',
    
}
</script>
<style scoped>
    ul{
        padding: 0px;
        list-style-type: none;
    }
    
    ul li{
        display: inline-block;
        
    }

    .Nav a{
        display: inline-block;
        width: 100px;
        height: 50px;
        line-height: 50px;
        text-align: center;
        border: 0px;
        text-decoration: none;
        color: black;
    }

    a:hover,a:focus{
        cursor: pointer;
        background-color: rgb(36, 133, 197);
        border-radius: 5px;
    }
</style>